<!--
 * @Author: your name
 * @Date: 2021-10-10 09:44:31
 * @LastEditTime: 2021-10-14 23:44:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\pages\Ref_learn\customRef.vue
-->
<template>
  <div>
    <h1>
      customRef
    </h1>

    <a-typography>

      <a-typography-paragraph>
        <p>{{ value }}</p>
        <input v-model="value" />
        <a-input v-model:value="value"></a-input>
      </a-typography-paragraph> 
      
    </a-typography>
  </div>
</template>

<script>
import { customRef } from 'vue'
// 自定义ref
const myRef = (value, delay) => {
  let timer = null
  return customRef((track, trigger) => {
    return {
      get () {
        track() 
        return value
      }, 
      set (newVal) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newVal
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup(props) {
    const value = myRef(0, 500)

    return {
      value
    }
  }
}
</script>

<style>

</style>